<template>
  <div class="home-wrap global-wrap">
    <p class="global-title">- 补充信息 -</p>
    <div class="form-wrap">
      <van-form @submit="onSubmit" class="form">
        <div class="no-data" v-if="noFormData">没有补充信息</div>

        <div v-for="(item, index) in formArr" :key="index">
          <form-input
            v-if="
              item.component === 'input-normal' ||
              item.component === 'input-number' ||
              item.component === 'input-money'
            "
            :key="index"
            v-model="dynamicForm[item.code]"
            :config="item"
          />
          <form-select
            v-if="item.component === 'select'"
            :key="index"
            v-model="dynamicForm[item.code]"
            :config="item"
          />
          <form-date-picker
            v-if="item.component === 'date'"
            :key="index"
            v-model="dynamicForm[item.code]"
            :config="item"
          />
        </div>

        <div class="button-wrap">
          <div class="prev-step" @click="$router.back()">上一步</div>
          <van-button round block type="info" native-type="submit">
            提&nbsp;&nbsp;&nbsp;&nbsp;交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import loading from "@/globalComponents/Loading/loading";
import { Field, Form, Button, Dialog, Toast } from "vant";
import { callBack, saveInfo, upload } from "@/api/index";
import FormInput from "@/components/form-input";
import FormSelect from "@/components/form-select";
import FormDatePicker from "@/components/form-date-picker";

export default {
  name: "SubjoinInfo",
  components: {
    loading,
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    FormInput,
    FormSelect,
    FormDatePicker,
  },
  data() {
    return {
      dynamicForm: {},
      formArr: [],
      inputData: {},
      noFormData: false,
      idFront: undefined,
      idReverse: undefined,
      bankIdFront: undefined,
    };
  },
  activated() {
    this.noFormData = false;
    const basicInfo = this.$route.params.basicInfo;
    console.log(basicInfo, 67);
    if (basicInfo) {
      this.inputData = basicInfo;
    }
    if (!this.inputData.idNumber) {
      Dialog.alert({
        title: "错误",
        message: "请先填写基本信息",
        theme: "round-button",
        confirmButtonText: "立即填写",
      }).then(() => {
        const query =
          this.$route.query && this.$route.query.QRCode
            ? { QRCode: this.$route.query.QRCode }
            : {};
        this.$router.replace({ path: "personInfo", query });
      });
    } else {
      // 保存file，因为之后会用id覆盖inputData中的字段；
      this.idFront = this.inputData.idFront;
      this.idReverse = this.inputData.idReverse;
      this.bankIdFront = this.inputData.bankIdFront;
      // 获取动态表单内容
      callBack({
        qrcode: this.inputData.qrcode,
      }).then((res) => {
        if (!res.length) {
          this.noFormData = true;
        }
        res.forEach((ele) => {
          this.$set(this.dynamicForm, ele.code, ele.defaultValue || "");
        });
        this.formArr = res;
        console.log(this.dynamicForm, this.formArr, 103);
      });
    }
  },
  methods: {
    onSubmit() {
      console.log({ ...this.inputData, ...this.dynamicForm }, 94);
      this.upLoadFile().then((res) => {
        this.inputData.idFront = res[0].id;
        this.inputData.idReverse = res[1].id;
        this.inputData.bankIdFront = res[2].id;
        console.log({ ...this.inputData, ...this.dynamicForm }, 113);
        saveInfo({ ...this.inputData, ...this.dynamicForm }).then((res) => {
          console.log(res, 92);
          Dialog.alert({
            title: "成功",
            message: "提交成功！",
            theme: "button",
            confirmButtonText: "确定",
          }).then(() => {
            const query = { QRCode: this.$route.query.QRCode, reload: true }
            this.$router.replace({ path: "personInfo", query });
          });
        });
      });
    },
    // 三张图片上传
    upLoadFile() {
      return new Promise((resolve, reject) => {
        const p1 = new Promise((resolve, reject) => {
          const fd = this.getFormData(this.idFront);
          upload(fd).then((res) => {
            resolve(res);
          });
        });
        const p2 = new Promise((resolve, reject) => {
          const fd = this.getFormData(this.idReverse);
          upload(fd).then((res) => {
            resolve(res);
          });
        });
        const p3 = new Promise((resolve, reject) => {
          const fd = this.getFormData(this.bankIdFront);
          upload(fd).then((res) => {
            resolve(res);
          });
        });
        Promise.all([p1, p2, p3]).then(
          (res) => {
            resolve(res);
          },
          (err) => reject(err)
        );
      });
    },
    getFormData(file) {
      const fd = new FormData();
      fd.append("file", file);
      fd.append("fileType", "png");
      fd.append("isPublic", true);
      fd.append("qrCode", this.inputData.qrcode);
      return fd;
    },
  },
};
</script>

<style lang='stylus' scoped>
.idCard-wrap
  width 100%
  display flex
  font-size 0
  justify-content space-between
  .img-item
    width 49%
    img
      width 100%
.form-wrap
  .no-data
    text-align center
    line-height 90px
    color #aaa
    background rgb(248, 248, 248)
    border-radius 8px
  & .van-field
    padding 4.5px 0
    &::after
      display none
  & >>> .van-field__label
    width 4em
    text-align right
    color #99ACBF
    font-size 15px
    display inline-flex
    line-height 1.1em
    align-items center
    flex-direction row-reverse
    height 36px
  & >>> .van-field__body
    height 36px
    background #F4F7F8
    border-radius 5px
    padding 0 5px
    box-sizing border-box
  .button-wrap
    display flex
    justify-content center
    margin 25px 0
    cursor pointer
    .prev-step
      height 42px
      line-height 42px
      background #0DC2FF
      padding 0 33px
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      text-align center
      border-radius 999px
      color white
      margin-right 20px
      font-size 14px
    & >>> .van-button
      display inline-flex
      width auto
      height 42px
      padding 0
      background #0DC2FF
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      border none
    & >>> .van-button__content
      display inline-flex
      padding 0 33px
</style>